<template>
	<movable-area style="width: 100%; height: 100vh">
		<movable-view :x="x" :y="y" direction="all" @change="onChange">
			<view>
				<view class="lxkf">
					<button data-im-type="order" :data-order-id="constData.order_id" :data-im-id="dataImId"
						open-type="im"></button>
					<image src="@/static/image/my/lxkf.png" mode=""></image>
				</view>
			</view>
		</movable-view>
		<view class="content" v-if="isSohw">
			<view v-if="constData.status === 7" class="title_text" style="color: #909399">订单已取消~</view>
			<view v-if="constData.status === 1" class="title_text" style="color: #909399">订单待付款~</view>
			<view v-if="constData.status === 2" class="title_text" style="color: #909399">订单待预约~</view>
			<view v-if="constData.status === 3" class="title_text" style="color: #909399">订单待核销~</view>
			<view v-if="constData.status === 6" class="title_text" style="color: #909399">您的服务已完成~</view>
			<view v-if="constData.status === 4" class="title_text" style="color: #909399">退款中~</view>
			<view v-if="constData.status === 5" class="title_text" style="color: #909399">退款完成</view>
			<view v-if="constData.status === 11" class="title_text" style="color: #909399; font-size: 30rpx">订单待服务~
			</view>
			<view class="address" v-if="constData.status !== 2">
				<view v-if="constData.reservation_time" class="yyxx">预约信息</view>
				<view v-if="constData.address_id" class="additionOf">
					<view class="rem_text flexC">
						联系人:
						<text>{{ constData.address.name }}</text>
					</view>
					<view class="rem_text flexC">
						联系方式:
						<text>{{ constData.address.tel }}</text>
					</view>
					<view class="rem_text flexC">
						服务地址:
						<text>{{ constData.address.title
							}}{{ constData.address.address }}</text>
					</view>
				</view>
				<view v-if="constData.reservation_time" class="remarks">
					<view class="rem_text flexC">
						上门时段:
						<text>{{ constData.reservation_time }}</text>
					</view>
					<view class="rem_text flexC">
						预约备注:
						<text>{{ constData.remarks }}</text>
					</view>
				</view>
				<view v-if="constData.status === 8" class="delete1" @click="revesopen(constData.order_id)" style="
            color: #ffffff;
            background-color: #ff9900;
            border-color: #ff9900;
          ">修改预约时间</view>
			</view>
			<view v-if="
				constData.status !== 1 &&
				constData.status !== 7 &&
				constData.status !== 2 &&
				constData.poi_name != null
			" class="mendian">
				<view class="mdname">
					<view>门店名称：</view>
					<view>{{ constData.poi_name }}</view>
				</view>
				<view @click="phoneCall(constData.merchant_tel)" class="order_h">
					<view>联系门店</view>
					<view class="refund">
						<image src="@/static/image/home/telephone.png" mode=""></image>
						{{ constData.merchant_tel }}
					</view>
				</view>
			</view>
			<view class="pro_item">
				<image :src="constData.orderItem[0].img_url" mode=""></image>
				<view class="pro_text">
					<view class="pro_textchild" style="font-weight: 600">{{
						constData.orderItem[0].title
					}}</view>
					<view v-show="constData.orderItem[1]" class="fu_textle">
						<view>加购：{{ constData.orderItem[1].title }}*{{
							constData.orderItem[1].quantity
						}}</view>
						<view>￥{{
							constData.orderItem[1].price * constData.orderItem[1].quantity
						}}</view>
					</view>
					<view class="pro_button">
						<button :data-order-id="constData.order_id" data-im-type="order" :data-im-id="dataImId"
							open-type="im">
							商家客服
						</button>
						<pay-button-sdk v-if="constData.status === 5 || constData.status === 4" :mode="1"
							:order-status="constData.orderStatus || 1" :order-id="constData.order_sn"
							:refund-id="constData.refund_sn || ''" />
						<view class="refundBtn" @click="toRefund" v-if="(constData.product_type == 1
							&& constData.status !== 5
							&& constData.status !== 4
							&& constData.status !== 7
							&& constData.status !== 1
							&& constData.status !== 6
							&& constData.status !== 11)
							|| (constData.book_status == 0 && constData.product_type == 22 && constData.status !== 5
								&& constData.status !== 4
								&& constData.status !== 7
								&& constData.status !== 1
								&& constData.status !== 6
								&& constData.status !== 11)">
							申请退款
						</view>

						<view class="qxrefundBtn" v-if="constData.product_type == 22
							&& constData.book_status == 1
							&& constData.status !== 4
							&& constData.status !== 6
							&& constData.status !== 7
							&& constData.status !== 1
							&& constData.status !== 11" @click="qxMake">
							取消预约并退款
						</view>
					</view>
				</view>
				<view class="price_text"> </view>
			</view>
			<view class="orderCost">
				<view class="order_f">
					订单费用
					<text class="status">({{ constData.status === 1 ? "未支付" : "已支付" }})</text>
				</view>
				<view v-if="constData.status !== 1" class="order_y">应付款：<text>￥{{ constData.payment_money || 0 }}</text>
				</view>
				<view v-if="constData.status === 1" class="order_y">应付款：<text>￥{{ constData.price || 0 }}</text></view>
			</view>

			<view class="bouup" v-if="
				constData.status === 1 ||
				constData.status === 2 ||
				constData.status === 6 ||
				constData.status === 11
			">
				<view @click.stop="getToPay(constData.order_id)" v-if="constData.status === 1" class="delete">继续支付
				</view>
				<view @click="getPopUp" v-if="constData.status === 2" class="yuyue">立即预约</view>
				<!-- <view @click.stop="isnotRefund" class="delete" v-if="constData.status === 11" style="color: #606060; border-color: #ccc">未上门服务退款申请
				</view> -->
				<view @click.stop="theOrder(constData.order_id)" class="delete" v-if="constData.status === 11"
					style="color: #ff9900; border-color: #ff9900">确认服务完成</view>
			</view>
			<view class="rexian">
				<view class="wenzi"><text> 商家热线 </text>
					<text>工作时间8:30-23:00</text>
				</view>
				<view class="phone" :style="{ display: 'flex' }">
					<view class="anniuphone" @click="phoneCall(item.number)" v-for="item in constData.phoneList"
						:key="item.id">
						<image src="@/static/image/home/dianhua2.png" mode="scaleToFill" />
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="orderGoods">
				<view class="order_h">
					<view>订单编号</view>
					<view class="refund">
						{{ constData.order_sn }}
						<text @click="clipboard(constData.order_sn)">复制</text>
					</view>
				</view>
				<view class="order_h">
					<view>下单时间</view>
					<view class="refund">{{ constData.createtime }}</view>
				</view>
				<view class="order_h1">
					<view class="refund">
						<image src="@/static/image/my/kefu.png" mode="scaleToFill" />
						<button :data-order-id="constData.order_id" data-im-type="order" :data-im-id="dataImId"
							open-type="im">
							我要投诉
						</button>
						<view>我要投诉</view>
					</view>
				</view>
			</view>
			<view :style="{ height: $getBottomHight() + 100 + 'rpx' }"></view>
		</view>
		<!-- <uv-popup ref="popup" :round="10" mode="center" overlay="true" :close-on-click-overlay="false">
			<view class="popupRefund">
				<view class="popupTop">
					<image src="@/static/image/make/refundMess.png" mode="scaleToFill" />
				</view>
				<view class="popupCenter">
					<text>商家正紧急赶往现场，建议您先行与商家取得联系或拨打平台400热线。我们承诺将全心全意为您提供最周到的服务！</text>
				</view>
				<view class="popupButtons">
					<view @click="phoneCall(constData.merchant_tel)">联系商家</view>
					<view @click="phoneCall(item.number)" v-for="item in constData.phoneList" :key="item.id"
						style="background-color: #ffffff; color: #ff9900;border: 1rpx solid #ff9900;">400热线</view>
				</view>
				<view class="confrimRefund">
					<view @click="toRefund">继续退款</view>
				</view>
			</view>
		</uv-popup> -->
	</movable-area>
</template>

<script>
import selectTime from "@/components/selectTime/selectTime.vue";
import throttle from "@/utils/throttle.js";
import { mapGetters } from "vuex";
import { getOrderDetails, getOrderConfirm, cancelMake } from "@/api/home.js";
import { setTiktokIm } from "@/api/my.js";
export default {
	components: {
		selectTime,
	},
	data() {
		return {
			x: 500,
			y: 110,
			id: null,
			constData: {},
			show: false,
			isSohw: false,
			dataImId: "64405815494",
			numberPhone: "18006406233",
			reservation_time: "",
		};
	},
	computed: {
		...mapGetters("user", ["isLogin"]),
	},
	onLoad(option) {
		this.id = option.id;
		if (!this.isLogin) {
			uni.navigateTo({
				url: "/pages/login/login",
			});
			return false;
		}
		this.getTiktokIm();
	},
	onShow() {
		this.rderDetails(this.id);
	},
	methods: {
		onChange(e) {
			this.x = e.detail.x;
			this.y = e.detail.y;
		},
		getPopUp() {
			uni.navigateTo({
				url: "/pages/reservation/reservation?id=" + this.id,
			});
		},
		toRefund() {
			uni.navigateTo({
				url: "/pages/refund/refund?id=" + this.id,
			});
		},
		phoneCall(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber,
			});
		},
		revesopen(id) {
			uni.navigateTo({
				url: "/pages/modify/modify?id=" + id,
			});
		},
		//取消预约
		qxMake() {
			uni.navigateTo({
				url: "/pages/refund/refund?id=" + this.id,
			});
		},
		getTiktokIm() {
			setTiktokIm().then((res) => {
				if (res.code === 1) {
					this.dataImId = res.data;
				}
			});
		},
		// 确认订单
		theOrder(id) {
			uni.showModal({
				title: "提示",
				content: this.constData.refundConfirm,
				success: (res) => {
					if (res.confirm) {
						getOrderConfirm({
							order_id: id,
						}).then((res) => {
							if (res.code === 1) {
								this.$showToast("确认成功！");
								this.rderDetails(this.id);
							} else {
								this.$showToast(res.msg);
							}
						});
					}
				},
			});
		},
		toReview(id) {
			uni.navigateTo({
				url: "/pages/uploadReview/uploadReview?orderId=" + id,
			});
		},
		getToPay: throttle(function (id) {
			tt.continueToPay({
				orderId: id,
				success: (res) => {
					this.$showToast("支付成功");
					this.rderDetails(this.id);
				},
				fail: (res) => {
					this.$showToast("支付失败, 请重新下单");
				},
			});
		}, 600),
		clipboard(data) {
			uni.setClipboardData({
				data: data,
				success: () => {
					this.$showToast("复制成功");
				},
			});
		},
		rderDetails(id) {
			getOrderDetails({
				id: id,
			}).then((res) => {
				if (res.code === 1) {
					this.constData = res.data;
					let TimeDays = 1000 * 60 * 60 * 24 * 3;
					this.constData.orderTime = Number(new Date()) + TimeDays;
					this.isSohw = true;
				} else {
					this.$showToast(res.msg);
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.jdt::v-deep {
	margin-bottom: 28rpx;

	.uv-steps {
		justify-content: center;

		.uv-steps-item__wrapper {
			background-color: #f4f4f4;
		}
	}
}

.popupRefund {
	width: 82vw;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;

	.popupTop {
		background-color: #ff9900; // 这里可以更改为你想要的背景色
		height: 160rpx; // 根据需要调整高度
		border-bottom-left-radius: 50%; // 左下角圆角
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom-right-radius: 50%; // 右下角圆角

		image {
			width: 100rpx;
			height: 100rpx;
			margin: 0 auto;
			z-index: 99999;
		}
	}

	.popupCenter {
		padding: 80rpx 36rpx;
		text-align: center;
		font-size: 30rpx;
		color: #000; // 文字颜色
		font-weight: bold;

		text {
			display: block;
			margin-bottom: 20rpx;
		}
	}

	.popupButtons {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #f5f5f5; // 可选：按钮区域的背景色

		view {
			background-color: #ff9900; // 按钮背景色
			color: #fff; // 按钮文字颜色
			padding: 16rpx 50rpx;
			border-radius: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.confrimRefund {
		background-color: #f5f5f5;
		color: #646464;
		font-size: 26rpx;
		padding: 0 0 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.customer {
	height: 120rpx;
	width: 120rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	position: relative;
	flex-direction: column;
	background: #f5f5f5;
	border: 1rpx solid #ff9900;
	opacity: 0.9;

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 99999;
	}

	image {
		width: 48rpx;
		height: 48rpx;
		margin-top: 16rpx;
	}

	text {
		color: #ff9900;
		font-weight: bold;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
}

.lxkf {
	position: relative;
	opacity: 0.9;

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	image {
		width: 200rpx;
		height: 180rpx;
		margin-top: 16rpx;
	}
}

.refundBtn {
	display: inline-block;
	color: #606060;
	border: 1rpx solid #ccc;
	height: 56rpx;
	padding: 0 32px;
	border-radius: 56rpx;
	font-size: 28rpx;
	line-height: 56rpx;
}

.qxrefundBtn {
	display: inline-block;
	color: white;
	background: #ff9900;
	border: 1rpx solid #ccc;
	height: 56rpx;
	padding: 0 40rpx;
	border-radius: 56rpx;
	font-size: 28rpx;
	line-height: 56rpx;
}

.textyiwen {
	color: #ff9900;
	font-size: 30rpx;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 20rpx;

	.anniuphone,
	.lastPhone {
		// width: 200rpx;
		// height: 44rpx;
		display: flex;
		padding: 12rpx 20rpx;
		// border: 1px solid #ff9900;
		border-radius: 76rpx;
		text-align: center;
		margin-top: 4rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
}

.check {
	text-align: center;
	margin-top: 20rpx;

	image {
		width: 420rpx;
		height: 420rpx;
	}
}

.title_text {
	margin-bottom: 20rpx;
	font-size: 38rpx;
	letter-spacing: 2rpx;
	padding: 0 40rpx;
}

.bouup {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;

	.delete {
		height: 72rpx;
		padding: 0 50rpx 0 50rpx;
		font-size: 28rpx;
		border-radius: 75rpx;
		color: #ff9900;
		border: 1rpx solid #ff9900;
		font-weight: bold;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.choice {
		.title {
			color: #1c2023;
			font-size: 28rpx;
			font-weight: bold;
			width: 150rpx;
		}

		.rightIcon {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.yuyue {
		height: 72rpx;
		padding: 0 50rpx 0 50rpx;
		font-size: 28rpx;
		border-radius: 75rpx;
		background-color: #ff9900;
		color: #ffffff;
		border: 1rpx solid #ff9900;
		font-weight: bold;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	button {
		width: fit-content;
		margin: 0;
		height: 75rpx;
		font-size: 28rpx;
		color: #ff9900;
		font-weight: bold;
		padding: 0 50rpx 0 50rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid#ff9900;
		justify-content: center;
		border-radius: 75rpx;
		background: #fff;
	}

	button::after {
		border: none;
	}
}

.orderGoods {
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;

	.order_h {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;

		.refund {
			display: flex;
			align-items: center;
			position: relative;

			button::after {
				border: none;
				background-color: none;
			}

			button {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 99999;
			}

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				padding: 6rpx 8rpx;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.order_h1 {
		display: flex;
		justify-content: flex-end;
		padding: 25rpx;
		font-size: 30rpx;

		.refund {
			display: flex;
			align-items: center;
			position: relative;

			button::after {
				border: none;
				background-color: none;
			}

			button {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 99999;
			}

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				padding: 6rpx 8rpx;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.orderCost {
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;

	.order_f {
		font-size: 32rpx;
		margin-left: 25rpx;

		.status {
			font-size: 28rpx;
			color: #c0c4cc;
			padding-left: 10rpx;
		}
	}

	.order_y {
		font-size: 30rpx;
		margin-right: 25rpx;

		text {
			font-weight: bold;
		}
	}
}

.promt {
	color: #ff9900;
	font-size: 24rpx;
	margin-top: 20rpx;
	font-size: 26rpx;
	padding-left: 5%;
	padding-right: 5%;
}

.rexian {
	background-color: #fff;
	width: 95%;
	margin: 20rpx auto 0 auto;
	border-radius: 20rpx;
	font-size: 30rpx;

	.wenzi {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.phone {
		padding: 10px;
		padding-top: 0;
		justify-content: center;
	}

	.anniuphone {
		align-items: center;
		display: flex;
		padding: 12rpx 20rpx;
		border-radius: 76rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 4rpx;
		background: #ff9900;
		color: white;

		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 20rpx;
		}
	}
}

.mendian {
	background-color: #fff;
	width: 95%;
	margin: 20rpx auto 0 auto;
	border-radius: 20rpx;
	font-size: 30rpx;
	border: 1px solid #ff9900;

	.mdname {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;
		padding-bottom: 0;
	}

	.order_h {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 30rpx;

		.refund {
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				padding: 6rpx 8rpx;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.pro_item {
	display: flex;
	background-color: #fff;
	width: 95%;
	margin: 30rpx auto 0 auto;
	border-radius: 20rpx;
	padding: 20rpx 0;
	font-size: 30rpx;

	image {
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
	}

	.price_text {
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_item {
		font-size: 26rpx;
		color: #c0c4cc;
		margin-top: 10rpx;
	}

	.pro_text {
		margin: 0 20rpx;
		flex: 1;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.fu_textle {
			display: flex;
			color: #c0c4cc;
			font-size: 28rpx;
			padding: 16rpx 0;
			justify-content: space-between;
		}

		button {
			display: inline-block;
			color: #ff9900;
			border: 1px solid #ff9900;
			height: 28px;
			padding: 0 16px;
			border-radius: 28px;
			font-size: 14px;
			line-height: 28px;
			background: #ffffff;
		}

		button::after {
			border: none;
		}

		.pro_textchild {
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.pro_button {
			display: flex;
		}
	}
}

.content {
	padding-top: 30rpx;
}

.coolopse {
	width: 95%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
}

.defrevese {
	width: 95%;
	background-color: #ff9900;
	border-radius: 20rpx;
	margin: 0 auto;
	padding-bottom: 32rpx;
	margin-top: 16rpx;

	.top {
		display: flex;
		justify-content: space-between;
		color: #f4f4f5;
		font-size: 30rpx;
		padding: 24rpx;
	}

	.yybuttn {
		width: 95%;
		height: 68rpx;
		text-align: center;
		color: #ff9900;
		background: white;
		line-height: 68rpx;
		border-radius: 24rpx;
		margin: auto;
		margin-top: 12rpx;
		font-size: 28rpx;
	}
}

.address {
	width: 95%;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;

	.yyxx {
		font-size: 32rpx;
		margin-left: 25rpx;
		padding-top: 18rpx;
		margin-top: 18rpx;
	}

	.delete1 {
		height: 72rpx;
		padding: 0 50rpx 0 50rpx;
		font-size: 28rpx;
		border-radius: 75rpx;
		color: #ffffff;
		border: 1rpx solid #ff9900;
		font-weight: bold;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26%;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.additionOf {
		font-size: 26rpx;
		padding-left: 25rpx;

		.rem_text {
			color: #737373;
			margin-top: 15rpx;

			text {
				font-weight: bold;
				color: #000;
				padding-left: 20rpx;
			}
		}
	}

	.adderss_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		padding-top: 24rpx;

		.additionOf {
			font-size: 13px;
			padding-left: 13px;

			.rem_text {
				color: #737373;
				margin-top: 15rpx;

				text {
					font-weight: bold;
					color: #000;
					padding-left: 20rpx;
				}
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 40rpx;
			}

			.street {
				font-size: 28rpx;

				.title_tex {
					display: flex;
					align-items: center;

					.title_item {
						font-weight: 600;
						padding-right: 20rpx;
						font-size: 30rpx;
					}
				}
			}
		}

		.goAddd {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #f5c71c;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.remarks {
		font-size: 26rpx;
		padding-left: 25rpx;

		.rem_text {
			color: #737373;
			margin-top: 15rpx;

			text {
				font-weight: bold;
				color: #000;
				padding-left: 20rpx;
			}
		}
	}
}
</style>
